import { ref, computed, unref, onMounted, onUnmounted } from "vue";
import { saveTitleLocalstory, getTitleLocalstory } from "../utils/index";

export function useHeader() {
  const title = ref(""); // 默认标题
  const isTitleEdit = ref(false);
  const isShowTitle = computed(() => !unref(isTitleEdit) && unref(title));
  const setTitle = (newTitle) => {
    title.value = newTitle;
  };
  const setTitleEdit = (value) => {
    isTitleEdit.value = value;
  };
  const handleTitleBlur = () => {
    unref(title) && setTitleEdit(false);
    setTitle(unref(title));
    saveTitleLocalstory(unref(title));
  };
  const handleDbclickTitle = () => setTitleEdit(true);
  onMounted(() => {
    getTitleLocalstory(setTitle);
  });
  onUnmounted(() => {
    saveTitleLocalstory(unref(title));
  });
  return {
    title,
    isShowTitle,
    setTitle,
    handleDbclickTitle,
    handleTitleBlur,
  };
}
